<template>
  <a-layout>
    <a-layout-header :style="{ zIndex: 0, width: '100%' }">
      <a-row>
        <a-col :span="2">
          <img
            :src="imgURL + 'logo2.png'"
            alt="logo"
            title="logo"
            style="height: 55px"
          />
        </a-col>
        <a-col :span="20">
          <a-menu
            mode="horizontal"
            theme="dark"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="1" @click="books">
              <pie-chart-outlined />
              <span>借阅图书</span>
            </a-menu-item>
            <a-menu-item key="2" @click="returnBook">
              <pie-chart-outlined />
              <span>归还图书</span>
            </a-menu-item>
            <a-menu-item key="3" @click="reservation">
              <pie-chart-outlined />
              <span>预约情况</span>
            </a-menu-item>
            <a-menu-item key="4" @click="history">
              <pie-chart-outlined />
              <span>借阅历史</span>
            </a-menu-item>
          </a-menu>
        </a-col>
        <a-col :span="2">
          <a-menu
            mode="horizontal"
            theme="dark"
            :style="{ lineHeight: '64px' }"
          >
            <a-menu-item key="0" @click="exit">
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </a-col>
      </a-row>
    </a-layout-header>
    <!-- 这是底部 -->
    <a-layout style="min-height: 100vh">
      <a-layout>
        <a-layout-content style="margin: 0 16px; min-height: 750px">
          <div
            :style="{ margin: '10px 0 0 0', background: '#fff', height: '1450px' }"
          >
            <router-view></router-view>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  DashboardOutlined,
  ThunderboltOutlined,
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { imgURL } from "../../api/storage";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";

export default {
  name: "LangSelect",
  props: {
    size: {
      type: String,
      default: "small",
    },
  },
  components: {
    ThunderboltOutlined,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    DashboardOutlined,
  },
  setup() {
    const getCurrentUser = () => {};
    const router = useRouter();
    const currentUser = ref({});

    // 网页router刷新
    const books = () => {
      router.push({ path: "/home/books" });
    };
    const returnBook = () => {
      router.push({ path: "/home/returnBook" });
    };
    const reservation = () => {
      router.push({ path: "/home/reservation" });
    };
    const history = () => {
      router.push({ path: "/home/history" });
    };

    const exit = () => {
      removeLocalToken();
      router.push("/login");
      // del("/manager/mHome/exit").then((res) => {
      //   removeLocalToken();
      //   router.push("/m_login");
      // });
    };

    return {
      books,
      returnBook,
      reservation,
      history,
      exit,
    };
  },

  data() {
    return {
      imgURL,
      collapsed: ref(false),
      selectedKeys: ref(["1"]),
    };
  },
};
</script>
<style>
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
.exit {
  float: right;
}
</style>